<template>
	<transition name="right_box">
		<div class="right_slide_shadow" v-show="show_slide_box">
			<transition name="right">
				<div class="right_slide_box"  v-show="show_slide_box">
					<div style="color:#6c9bf8;line-height:50px;">新增品牌</div>
					<slot></slot>
					<div class="bottom_btn">
						<el-button @click="$emit('update:show_slide_box', false)">取消</el-button>
						<el-button type="primary">确定</el-button>
					</div>
				</div>
			</transition>
		</div>
	</transition>
</template>
<script>
export default {
	props:['show_slide_box'],
	methods:{
		
	}
}
</script>
<style lang="scss" scoped>
	.right_slide_shadow{
		background:rgba(0,0,0,0.3);
		position: fixed;
		right: 0;
		top: 50px;
		height:calc(100% - 50px);
		width:100%;
		z-index:10;
		.right_slide_box{
			position:absolute;
			right: 0;
			top: 0;
			height: 100%;
			width:70%;
			background:#fff;
			padding:5px 0 60px 30px;
			transform:translateX(10%);
			.bottom_btn{
				position:absolute;
				left:50px;
				bottom: 10px;
			}
		}
		.right-enter,.right-leave-to {
			transform:translateX(101%);
		}
		.right-enter-active,.right-leave-active{
			transition: all .6s ease-in-out;
		}
		.right-enter-to{
			transform:translateX(10%);
		}
	}
	.right_box-leave-active{
		transition: all .6s cubic-bezier(1.0, 0.5, 0.8, 1.0);
	}
	.right_box-leave-to{
		opacity: 1;
	}

</style>